<template>
  <div>
    <div class="header">
      <div
        class="el-row"
        style="padding-left: -15px; margin-right: -15px; width: 100%"
      >
        <div class="el-col6" style="padding-left: 15px; padding-right: 15px">
          <div class="el-col">
            <div class="lable">库区名称</div>
            <input
              type="text"
              placeholder="请输入"
              v-model="test.areaName"
              style="
              border:0;
               border-radius: 6px;
                margin-top: 20px;
                height: 40px;
                width: 250px;
                background-color: rgb(248, 245, 245);
              "
            />
          </div>
        </div>
        <div class="el-col6" style="padding-left: 15px; padding-right: 15px">
          <div class="el-col">
            <div class="lable">库位名称</div>
            <input
              type="text"
              placeholder="请输入"
              v-model="test.name"
              style="
               border:0;
               border-radius: 6px;
                margin-top: 20px;
                height: 40px;
                width: 250px;
                background-color: rgb(248, 245, 245);
              "
            />
          </div>
        </div>
        <div class="el-col6" style="padding-left: 15px; padding-right: 15px">
          <div class="el-col">
            <div class="lable">仓库状态</div>
            <el-select
              v-model="test.status"
              placeholder="请选择"
              style="
                margin-top: 20px;
                height: 30px;
                width: 250px;
                background-color: rgb(248, 245, 245);
              "
            >
              <el-option
                v-for="item in statusId"
                :key="item.status"
                :label="item.value"
                :value="item.status"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="butt" style="margin-left: 50px">
          <el-button class="butt1" round @click="search">搜索</el-button>
          <el-button
            class="butt1"
            style="background-color: rgb(255, 255, 255)"
            round
            @click="test = ''"
            >重置</el-button
          >
        </div>
      </div>
    </div>
    <div class="body">
      <div style="width: 100%; height: 80px">
        <el-button
          style="background-color: rgb(0, 190, 118); width: 100px; height: 45px"
          round
          @click="$router.push('kuweilocation')"
        >
          <span style="color: #fff">新增仓库</span>
        </el-button>
        <el-button
          style="background-color: #fff; width: 120px; height: 45px;margin-left:780px"
          round

        >
          <span >下载库区模板</span>
        </el-button>
        <el-button
          style="background-color: #fff; width: 120px; height: 45px"
          round
        >
          <span >导入库区信息</span>
        </el-button>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="120">
        </el-table-column>
        <el-table-column prop="warehouseName" label="所属仓库" width="120">
        </el-table-column>
        <el-table-column prop="areaCode" label="库区编号" width="120">
        </el-table-column>
        <el-table-column prop="areaName" label="库区名称" width="120">
        </el-table-column>
        <el-table-column

          prop="code"
          label="库位编号"
          width="120"
        >
        </el-table-column>
        <el-table-column prop="name" label="库位名称" width="150">
        </el-table-column>
         <el-table-column
          prop="temperatureType"
          label="温度类型"
          width="120"
        >
        </el-table-column>
        <el-table-column prop="bearingType" label="承重类型" width="150">
        </el-table-column>
        <el-table-column prop="useType" label="用途属性" width="120">
        </el-table-column>
        <el-table-column
          :formatter="formatEmployment"
          prop="status"
          label="停用状态"
          width="120"
        >
        </el-table-column>
          <el-table-column prop="maxNum" label="承载上限" width="150">
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="180">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template v-slot="{ row }">
            <el-button type="text" @click="$router.push({ path: '/kuweilocation', query: row })"  size="small"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="change(row)"
              >{{ row.status === 1 ? "停用" : "启用" }}</el-button
            >
            <el-button type="text" size="small" @click="remove(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="bottom">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="10"
        :current-page="1"
        :page-sizes="[10, 20, 30, 50]"
        layout="total,sizes,prev,pager,next,jumper"
        :total="parseInt(total)"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getdetails, delku, editku } from '@/api/kuwei'

import hireType from '@/constant/kuqumanage.js'

export default {
  data () {
    return {
      dialogVisible: false,
      input: '',
      tableData: [],
      statusId: hireType.hireType,
      test: {
        status: '',
        areaName: '',
        name: '',
        size: 10,
        current: 1
      },
      total: '',
      pages: '',
      page: {
        size: 10,
        current: 1,
        id: '',
        name: '',
        warehouseName: ''
      }
    }
  },
  created () {
    this.getdetails()
  },
  methods: {
    beforeClose () {},
    // 获取数据
    async getdetails () {
      const {
        data: { data }
      } = await getdetails(this.page)
      // console.log(data)
      this.tableData = data.records
      this.total = data.total

      for (let i = 0; i < data.records.length; i++) {
        if (data.records[i].temperatureType === 'CW') {
          data.records[i].temperatureType = '常温'
        } else if (data.records[i].temperatureType === 'LC') {
          data.records[i].temperatureType = '冷藏'
        } else if (data.records[i].temperatureType === 'HW') {
          data.records[i].temperatureType = '恒温'
        }

        if (data.records[i].bearingType === 'ZX') {
          data.records[i].bearingType = '重型'
        } else if (data.records[i].bearingType === 'QX') {
          data.records[i].bearingType = '轻型'
        } else if (data.records[i].bearingType === 'BX') {
          data.records[i].bearingType = '中型'
        }
        if (data.records[i].useType === 'RKHCQ') {
          data.records[i].useType = '入库缓存区'
        } else if (data.records[i].useType === 'CKHCQ') {
          data.records[i].useType = '出库缓存区'
        } else if (data.records[i].useType === 'CCQ') {
          data.records[i].useType = '存储区'
        } else if (data.records[i].useType === 'FJQ') {
          data.records[i].useType = '分拣区'
        } else if (data.records[i].useType === 'ZJQ') {
          data.records[i].useType = '质检区'
        }
      }
    },
    formatEmployment (row, column, cellValue, index) {
      const obj = hireType.hireType.find((item) => item.status === cellValue)
      return obj ? obj.value : '停用'
    },
    handclick (row) {
      this.$router.push('detail')
      this.formDate = { ...row }
    },

    // 删除数据
    async remove (id) {
      await this.$confirm('确定要删除嘛')
      await delku(id)
      this.$message.success('删除成功了哦~')
      this.getdetails()
    },
    // 搜索
    async search () {
      const { data: { data } } = await getdetails(this.test)
      this.tableData = data.records
      this.test.current = parseInt(data.current)
      // this.test.size = parseInt(data.size)
      this.total = parseInt(data.total)
    },
    async  change (row) {
      if (row.status === 1) {
        await this.$confirm(`确定要停用：${row.name} 吗?`, '确认停用', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await editku({ id: row.id, status: 0 })
          this.getdetails()
          this.$message({
            type: 'success',
            message: '状态改变成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      } else {
        await this.$confirm(`确定要启用：${row.name} 吗?`, '确认启用', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await editku({ id: row.id, status: 1 })
          this.getdetails()

          this.$message({
            type: 'success',
            message: '状态改变成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      }
    },
    handleSizeChange (size) {
      this.page.size = size
      this.getdetails()
    },
    handleCurrentChange (current) {
      this.page.current = current
      this.getdetails()
    }

  }
}
</script>

<style lang="less" scoped>
.header {
  height: 100px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  padding: 30px;
  margin-bottom: 20px;
  width: 1200px;
  .el-row {
    display: flex;
  }
  .el-col{
    height: 0;
  }
  .el-col-6 {
    .el-col {
      position: relative;
      height: 186px;
      background: #fbf7f7;
      border-radius: 8px;
      padding: 20px;
    }
    width: 25%;

    .lable {
      margin-bottom: -10px;
      height: 18px;
      color: #887e7e;
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 300;
    }
  }
}
.butt1 {
  width: 100px;
  height: 40px;
  margin-top: 40px;
  margin-left: 30px;
  background-color: rgb(255, 178, 0);
}
.body {
  //  height: 900px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  padding: 30px;
  margin-bottom: 20px;
  width: 1200px;
  .middle {
    background-color: gray;
    height: 50px;
  }
}
.bottom {
  margin-top: 30px;
  margin-left: 600px;
}
.buttoncan {
  height: 40px;
  border-radius: 20px;
  width: 200px;
  font-size: 14px;
  //     font-family: PingFangSC,PingFangSC-Medium;
  //     font-weight: 500;
  text-align: center;
  // line-height: 40px;
  padding-left: 26px;
  padding-right: 26px;
  //     cursor: pointer;
  //     outline: 0;
}
.dialog-footer {
  padding: 25px 0 0;
  margin: 0 -30px -5px;
  border-top: 1px solid #f5efee;
  text-align: center;
}
</style>
